<template>
  <div id="app">
    <!--<div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>-->
    <index  v-if="isRouterAlive"></index>
  </div>
</template>

<style lang="scss" scoped>
#app {
  /*font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;*/
}
body {
  padding: 0;
  margin: 0;
}
#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}

.el-carousel__button {
  width: (30 / 3840 * 100) + vw;
  height: (2 / 2160 * 100) + vh;
}
.el-carousel__indicator--horizontal {
  padding: (12 / 2160 * 100) + vh (4 / 3840 * 100) + vw;
}
.el-carousel__indicators--outside {
  bottom: (26 / 2160 * 100) + vh;
  position: absolute;
  bottom: 0;
  transform: translateX(-50%);
}
.el-form-item__content {
  line-height: 5vh;

  @media (max-width: 891px) {

    @media screen and (orientation:portrait) {
      margin-left: 8.5vw !important;
    }

    @media screen and (orientation:landscape) {
      margin-left: 5.5vw !important;
    }
  }
}
.el-input__inner {
  height: (100/2160*100)+vh;
  line-height: (100/2160*100)+vh;
  padding: 0 (45/3840*100)+vw;


  @media (max-width: 891px) {

    @media screen and (orientation:portrait) {
      font-size: 2.4vw;
    }

    @media screen and (orientation:landscape) {
      font-size: 1.4vw;
      height: (150 / 2160 * 100) + vh;
    }
  }
}
.el-form-item__label {
  font-size: (14/3840*100)+vw;
  line-height: (120/2160*100)+vh;
  padding: 0 (42/3840*100)+vw 0 0;

  @media (max-width: 891px) {

    @media screen and (orientation:portrait) {
      width: 7.5vw !important;
      font-size: 2.4vw !important;
    }

    @media screen and (orientation:landscape) {
      font-size: 1.4vw !important;
      width: 5vw !important;
      line-height: 7.5vh;
    }
  }
}
.el-form-item {
  margin-bottom: (52/2160*100)+vh;

  @media (max-width: 891px) {

    @media screen and (orientation:landscape) {
      margin-bottom: 4vh;
    }
  }
}
.el-input {
  font-size: (34/3840*100)+vw;
  .el-input__clear {
    font-size: (34/3840*100)+vw;
  }
}
.el-button {
  padding: (28 / 3840 * 100) + vw (50 / 2160 * 100) + vh;
  font-size: (40 / 3840 * 100) + vw;

  @media (max-width: 891px) {

    @media screen and (orientation:portrait) {
      font-size: (90 / 3840 * 100) + vw;
      padding: (50 / 3840 * 100) + vw (40 / 2160 * 100) + vh;
    }
  }
}
.el-form-item__label {
  font-size: 1vw;
}
.el-form-item__error {
  font-size: (30/3840*100)+vw;
  
  @media (max-width: 891px) {

    @media screen and (orientation:portrait) {
      font-size: 2.2vw !important;
    }

    @media screen and (orientation:landscape) {
      font-size: 1vw;
    }
  }
}

.el-input__suffix {
  right: (30 / 3840 * 100) + vw;
}
.el-input__clear {
  font-size: (50 / 3840 * 100) + vw !important;

  @media (max-width: 891px) {

    @media screen and (orientation:portrait) {
      font-size: (130 / 3840 * 100) + vw !important;
    }

    @media screen and (orientation:landscape) {
      font-size: (80 / 3840 * 100) + vw !important;
    }
  }
}

.el-input__icon {
  width: (85/3840*100)+vw;
  line-height: (40/2160*100)+vh;
}
.el-carousel__button {
  width: (35 / 3840 * 100) + vw;
  height: (6 / 2160 * 100) + vh;
}
</style>
<script>
  import Index from "./views/index";
  export default {
    components: {Index},
    provide () {
        return{
            reload: this.reload
        }
    },
    data() {
        return {
            isRouterAlive: true
        }
    },
    methods: {
        reload(){
            this.isRouterAlive = false
            this.$nextTick(function(){
                this.isRouterAlive = true
            })
        }
    }
  }
</script>